<template>
  <view class="garbage-classify-page">

    <!-- 1. 物联网（IoT）驱动的分类系统 -->
    <view class="section">
      <view class="section-title">
        <text class="dot">1.</text>物联网（IoT）驱动的分类系统
      </view>

      <!-- (1) 智能回收箱 -->
      <view class="sub-section">
        <view class="sub-title">(1) 智能回收箱</view>
        <view class="item flex items-start"> <!-- 使用uView的flex布局 -->
          <text class="label mr-2">功能：</text>
          <text class="flex-1">满溢报警：通过重量/体积传感器通知清运。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2"> </text>
          <text class="flex-1">用户认证：刷卡/扫码开箱，记录投递数据（如韩国 “Zero Pay” 回收站）。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2">案例：</text>
          <text class="flex-1">新加坡 “NEA智能垃圾桶” 优化垃圾车路线。</text>
        </view>
      </view>

      <!-- (2) RFID追踪 -->
      <view class="sub-section">
        <view class="sub-title">(2) RFID追踪</view>
        <view class="item flex items-start">
          <text class="label mr-2">原理：</text>
          <text class="flex-1">在垃圾袋或物品上贴RFID标签，关联用户信息。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2">应用：</text>
          <text class="flex-1">日本横滨市：追踪分类准确性，对错误投递溯源。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2"> </text>
          <text class="flex-1">商业场景：超市回收包装时识别原商品信息。</text>
        </view>
      </view>
    </view>

    <!-- 2. 机器人自动化分拣 -->
    <view class="section">
      <view class="section-title">
        <text class="dot">2.</text>机器人自动化分拣
      </view>
      <view class="sub-section">
        <view class="item flex items-start">
          <text class="label mr-2">技术：</text>
          <text class="flex-1">机械臂+3D视觉：抓取传送带上的可回收物（如美国 “AMP Robotics” ）。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2"> </text>
          <text class="flex-1">高速气流分选：按重量分离轻质塑料和重质金属。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2">优势：</text>
          <text class="flex-1">替代高危人工分拣，效率提升50%以上。</text>
        </view>
      </view>
    </view>

    <!-- 3. 区块链与激励机制 -->
    <view class="section">
      <view class="section-title">
        <text class="dot">3.</text>区块链与激励机制
      </view>
      <view class="sub-section">
        <view class="item flex items-start">
          <text class="label mr-2">模式：</text>
          <text class="flex-1">积分兑换：正确分类获区块链积分，兑换商品（如北京 “绿色生活” APP）。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2"> </text>
          <text class="flex-1">碳账户：垃圾分类数据计入个人碳减排记录（如蚂蚁森林 “碳普惠” ）。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2">案例：</text>
          <text class="flex-1">巴塞罗那 “RECICLOS” 系统，用区块链防作弊。</text>
        </view>
      </view>
    </view>

    <!-- 4. 大数据与云平台 -->
    <view class="section">
      <view class="section-title">
        <text class="dot">4.</text>大数据与云平台
      </view>
      <view class="sub-section">
        <view class="item flex items-start">
          <text class="label mr-2">功能：</text>
          <text class="flex-1">动态调度：分析各区域垃圾量，优化清运车路线（如杭州 “城市大脑” ）。</text>
        </view>
        <view class="item flex items-start">
          <text class="label mr-2"> </text>
          <text class="flex-1">政策支持：通过数据制定垃圾收费政策（如台北市按量收费系统）。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 页面逻辑
import { ref, onMounted } from 'vue'

// const pageLoaded = ref(false)

// const toKnowledge = () => {
//   uni.navigateTo({
//     url: '/pages/knowledge/knowledge'
//   })
// }

// onMounted(() => {
//   pageLoaded.value = true
// })
</script>

<style scoped>
/* 基础样式 */
.garbage-classify-page {
  padding: 30rpx;
 min-height: 100vh;
 background-image: url('@/static/images/knowledge-bg2.jpg');
 background-attachment: fixed; /* 固定背景图，内容滚动时背景不动 */
 background-repeat: no-repeat; /* 防止背景图重复 */
 background-position: center;
 background-size: 100% 100%; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  color: #000;
}

.dot {
  width: 36rpx;
  height: 36rpx;
  background-color: #000;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 36rpx;
  margin-right: 15rpx;
  font-size: 28rpx;
}

.sub-section {
  margin-left: 20rpx;
  margin-bottom: 30rpx;
}

.sub-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #404040;
}

.item {
  margin-bottom: 15rpx;
  line-height: 1.8;
}

.label {
  font-weight: bold;
  min-width: 100rpx;
  display: inline-block;
  color: #000;
}

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style>